<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
</head>

<body class="dpflex fdcolumn">
    <!-- 头部效果 -->
    <header class="dpflex">
            <div id="backBtn">
                <span class="iconfont weui-icon-back-arrow"></span>
            </div>
            <div class="text">个人资料</div>
        </header>
    <!-- 主要内容 -->
    <main>
        <div class="page__hd">
            <!-- 更换头像 -->
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">更换头像</span>
                    </span>
                    <span class="weui-cell__ft">
                            <img  alt="" id="UserPic" width="80" height="80" class="headerPic">
                    </span>
                    <input type="file" id="foundfile" style="display: none">
                </div>
            </div>
            <!-- 昵称 -->
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">昵称</span>
                    </span>
                    <input type="text" class="weui-cell__ft" id="UserName" placeholder="用户名">
                </div>
            </div>
            <!-- 性别 -->
            
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access" id="Sex">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">性别</span>
                    </span>
                    <span class="weui-cell__ft" id="Sexval">男</span>
                </div>
            </div>
            <!-- 生日 -->
            
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access" id="Bir">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">生日</span>
                    </span>
                    <span class="weui-cell__ft" id="Birsday">详细信息</span>
                </div>
            </div>
            <!-- 所在省份 -->
            
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access" id="province">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">所在省份</span>
                    </span>
                    <span class="weui-cell__ft" id="provinceText">详细信息</span>
                </div>
            </div>
            <!-- 所在城市 -->
            
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access" id="City">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">所在城市</span>
                    </span>
                    <span class="weui-cell__ft" id="CityText">详细信息</span>
                </div>
            </div>
            <!-- 个人简介 -->
            <div class="weui-cells demo_badge_cells">
                <div role="link" class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span class="demo_badge_title">个人简介</span>
                    </span>
                </div>
                <div class="weui-form__control-area">
                    <div class="weui-cells__group weui-cells__group_form">
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell weui-cell_active">
                                <div class="weui-cell__bd">
                                    <textarea class="weui-textarea" placeholder="请输入您的简介" rows="3" id="inps"></textarea>
                                    <div role="option" aria-live="polite" class="weui-textarea-counter"><span id="numText">0</span>/100</div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

        <a href="javascript:" role="button" class="weui-btn save-btn" id="SaveBtn">保存修改</a>
    </main>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
</body>

</html>